import { Component, Prop, Vue } from 'vue-property-decorator'
import styles from './styles.less'

@Component({})
export default class Timeline extends Vue {
  @Prop({ type: String, default: '#E4E4E4' }) private timelineTheme!: any
  @Prop({ type: String, default: '#fff' }) private timelineBg!: any

  protected render(h: any) {
    return (
      <div class={{ [styles.timeline]: true }}>
        <ul class="timeline" ref="timeline">
          {this.$slots.default}
        </ul>
      </div>
    )
  }
  private mounted() {
    const timeline = this.$refs.timeline as any
    timeline.style.setProperty('--timelineTheme', this.timelineTheme)
    timeline.style.setProperty('--timelineBg', this.timelineBg)
  }
}
